<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>登陆</title>
    <link rel="stylesheet" href="../src/css/weui.css">
    <script src="../src/js/libs/jquery-3.0.0.min.js"></script>
    <script src="../src/js/main.js"></script>
    <style>
        body{
            font: 1rem/1em "微软雅黑";
        }
        /* 头像 */
        .head{
            width: 4.6875rem;
            height: 4.6875rem;
            border-radius: 50%;
            background: url("../src/images/icons.png") no-repeat;
            background-size: 27.09375rem 16.625rem;
            background-position: 0 -8.4375rem;
            margin: 1.375rem auto 2.8125rem;
        }

        /* 输入框样式 */
         .input{
             position: relative;
             width: 90%;
             height:3.3125rem ;
             margin-left: 5%;
         }
        .input .img,.input input{
            position: absolute;
            left: 0;
        }
        .input .img{
            top: 0.8125rem;
            z-index: 10;
            width:1.28125rem;
            height: 1.46875rem;
            background: url("../src/images/icons.png");
            background-size: 27.09375rem 16.625rem;
            background-position: -5.625rem 0;
            margin-right: 0.90625rem;
        }
        .input:nth-child(2) .img{
            background-position: -7.5rem 0;
        }
        .input input{
            top: 0;
            width: 100%;
            text-indent: 2.12625rem;
            border: 0;
            font-size: 0.9375rem;
            color: #333333;
            line-height: 3.3125rem;
            box-sizing: border-box;
            border-bottom: solid 1px #ebebeb;
        }
        .input input:focus {
            border-bottom: solid 1px #333333;
        }

        /* 记住登陆状态、忘记密码 */
        .login-help{
            position: relative;
            margin-top: 1.5rem;
            font-size: 0.75rem;
            color: #999999;
            width: 90%;
            margin-left: 5%;
        }
        .login-help a{
            color: #999999;
           position: absolute;
            right: 0;
        }
        .login-help label{
            box-sizing: border-box;
            line-height: 0.75rem;
        }
        .login-help input[type="checkbox"]{
            width: 0.75rem;
            height: 0.75rem;
            margin-right: 0.5625rem;
        }
        /* 按钮样式 */
        .weui_btn_area{
            margin: 1.4375rem 5%;
        }
        a#button{
            font-size: 1.0625rem;
        }
    </style>
</head>
<body>

    <div class="head"></div>
<form>
    <div class="input">
        <div class="img"></div>
        <input name="name" type="text" placeholder="请输入您的用户名" />
    </div>
    <div class="input">
        <div class="img"></div>
        <input name="idcard" type="password" placeholder="请输入您的手机号码" />
    </div>

    <div class="login-help">
        <label><input type="checkbox">绑定微信号登陆</label>
        <a href="#">忘记密码</a>
    </div>

    <div class="weui_btn_area">
        <a class="weui_btn weui_btn_primary" id="button" href="index.html">登陆</a>
    </div>
</form>

</body>
</html>